<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uplife客户注册</title>
<style>
body {
	font-size: 14px;
}

table {
	width: 400px;
	margin: 20px auto;
}

table tr {
	height: 30px;
	line-height: 30px;
}
input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.tdl {
	width: 120px;
	text-align: right;
}
.inputText{
	width: 160px;
}

</style>
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		queryCustomerSource();
	});
	
	function queryCustomerSource(){
		var url = "sys-dict/list.do";
		$.post(url, {"type":"customerSource"}, function(data, status) {
			var sources = data['data']['dataList'];
			var defaultOption = "<option value=\"-1\" selected=\"selected\">请选择</option>";
			$("#sourceCode").append(defaultOption);
			for ( var i in sources) {
				var code = sources[i]['code'];
				var value = sources[i]['value'];
				var option = "<option value=\"" + code + "\">" + value + "</option>";
				$("#sourceCode").append(option);
			}			
		});
	}
	
	function register(){
		$("#tip").empty();
		if ($("#username").val() == null || $.trim($("#username").val()) == "") {
			alert("请输入账号");
			return;
		}
		if ($("#username").val().length < 5) {
			alert("账号长度应大于5位且小于16位");
			return;
		}
		if ($("#password").val() == null || $.trim($("#password").val()) == "") {
			alert("请输入密码");
			return;
		}
		if ($("#password").val().length < 6) {
			alert("密码长度应大于6位且小于16位");
			return;
		}
		if ($("#repassword").val() == null || $.trim($("#repassword").val()) == "") {
			alert("请输入重复密码");
			return;
		}
		if ($("#repassword").val().length < 6) {
			alert("重复密码长度应大于6位且小于16位");
			return;
		}
		if ($("#password").val() != $("#repassword").val()) {
			alert("两次密码不一致");
			return;
		}
		if ($("#name").val() == null || $.trim($("#name").val()) == "") {
			alert("请输入姓名");
			return;
		}
		if ($("#sourceCode").val() == null || $.trim($("#sourceCode").val()) == "-1" || $.trim($("#sourceCode").val()) == "") {
			alert("请选择来源");
			return;
		}
		if ($("#email").val() == null || $.trim($("#email").val()) == "") {
			alert("请输入邮箱");
			return;
		}
		
		$("#sourceValue").val($("#sourceCode").find("option:selected").text());
		
		var url = "user/register.do";
		$.post(url, $("#dataForm").serialize(), function(data, status) {
			var status = data['status'];
			if (status == "1") {
				$("#tip").text($("#username").val() + "注册成功，您可以在我们的Uplife APP登录您的账号，同步收到平台最新资讯！");
			} else {
				alert(data['message'])
			}
		});
	}
	function reset(){
		$("#username").val("");
		$("#password").val("");
		$("#repassword").val("");
		$("#name").val("");
		$("#birthday").val("");
		$("#email").val("");
	}
</script>
</head>
<body>
	<div style="width: 800px; height: 600px; margin: 0 auto; border-radius: 5px; border: 1px #D2D2D2 solid;">
		<div style="height: 42px; background-color: #F8F8F8; border-radius: 5px; text-align: center; line-height: 42px; font-size: 18px;">客户注册</div>
		<form id="dataForm">
		<table>
			<tr>
				<td class="tdl">账号：</td>
				<td>
					<input type="text" name="username" id="username" autocomplete="off" placeholder="请输入账号" class="inputText">
					<font color="red">*</font>
					<font style="font-size: 12px;color: #999">字母开头</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">密码：</td>
				<td>
					<input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码" class="inputText">
					<font color="red">*</font>
					<font style="font-size: 12px;color: #999">长度大于6位</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">重复密码：</td>
				<td>
					<input type="password" name="repassword" id="repassword" autocomplete="off" placeholder="请输入重复密码" class="inputText">
					<font color="red">*</font>
				</td>
			</tr>			
			<tr>
				<td class="tdl">姓名：</td>
				<td>
					<input type="text" name="name" id="name" autocomplete="off" placeholder="请输入" class="inputText">
					<font color="red">*</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">来源：</td>
				<td>
					<select name="sourceCode" id="sourceCode" class="inputText"></select>
					<input type="hidden" name="sourceValue" id="sourceValue">
					<font color="red">*</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">生日：</td>
				<td>
					<input type="text" name="birthday" id="birthday" placeholder="请输入" autocomplete="off" class="inputText">
					<font style="font-size: 12px;color: #999">e.g.2019-05-10</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">邮箱：</td>
				<td>
					<input type="text" name="email" id="email" placeholder="请输入" autocomplete="off" class="inputText">
					<font color="red">*</font>
				</td>
			</tr>
			<tr>
				<td class="tdl">性别：</td>
				<td>
					<label id="lnan" for="cnan">男</label>
					<input type="radio" name="sex" value="1" title="男" checked="" id="cnan">&nbsp;&nbsp;
					<label id="lnan" for="cnv">女</label>
					<input type="radio" name="sex" value="0" title="女" id="cnv">
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center">
					<input type="button" value="注册" style="width: 80px;" onclick="register()"/> 
					<input type="button" value="重置" style="width: 80px;" onclick="reset()"/>
				</td>
			</tr>
		</table>
		</form>
		<div id="tip" style="text-align: center;color: green;font-size: 14px;"></div>
	</div>
</body>
</html>